<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Qs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.12.3/qs.js"></script>
</head>

<body>

</body>
<script type="module">
    // 发送POST请求
    // axios({
    //     method: 'post',
    //     url: '/users/checkLogin',
    //     data: Qs.stringify({
    //         account: 'admin',
    //         password: 'cd3f0c85b158c08a2b113464991810cf2cdfc387'
    //     }),
    // })
    //     .then(res => {
    //         console.log(res);
    //     })
    //     .catch(err => {
    //         console.log(err);
    //     });




    // 请求基路径
    axios.defaults.baseURL = 'http://192.168.121.42:5000';
    // 请求超时时间
    axios.defaults.timeout = 5000
    // 添加请求拦截器
    axios.interceptors.request.use(
        function (config) {
            // 对于一些请求需要对用户做鉴权处理，这里可以把鉴权所需要的用户令牌传给后端
            // 一般在登录时会获取用户的令牌，保存在本地存储中，在这里取出来，放入请求头
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

    // 添加响应拦截器
    axios.interceptors.response.use(
        function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么，比如统一的成功或者失败的提示
            return response.data
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么，比如网络错误，token过期
            return Promise.reject(error);
        });







    // 封装axios请求
    function get(url, params) {
        return axios({
            method: 'post',
            url,
            params,
        })


    }
    function post(url, data) {
        return axios({
            method: 'post',
            url,
            data: Qs.stringify(data),
        })
    }




    // 封装使用
    get('https://api.uomg.com/api/rand.qinghua', { format: 'json' }).then(res => {
        console.log(res);

    })
    // 特别注意：如果使用axios.get别名来调用接口，第二个参数是一个对象，对象里有一个params属性，params属性里的才是你要传的参数
    axios.get('https://api.uomg.com/api/rand.qinghua', {
        params: {
            format: 'json'
        }
    }).then(res => {
        console.log(res);

    })

    post('/users/checkLogin', {
        account: 'admin',
        password: 'cd3f0c85b158c08a2b113464991810cf2cdfc387'
    }).then(res => {
        console.log(res);
    })
    //推荐在项目中针对异步请求代码优先使用async和await
    async function login() {
        const res = await post('/users/checkLogin', {
            account: 'admin',
            password: 'cd3f0c85b158c08a2b113464991810cf2cdfc387'
        })
        console.log(res);
    }
    login()






</script>

</html>